<template>
  <div class="search-page">
    <homeHeader/>
    <searchHeader />
    <div class="page-position">
      <div class="item-content">当前位置：首页>高级搜索</div>
    </div>
    <div class="search-potions item-content">
      <el-form ref="form" :model="formData.q" label-width="90px">
        <el-form-item label="关键词搜索" class="serach-item">
          <el-input
            class="input-content"
            type="text"
            placeholder="输入关键词 多个关键词用空格隔开"
          >
            <el-button slot="append" @click="handleSearch">搜索</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="关键词位置" class="serach-item">
          <el-radio-group v-model="formData.isTitle">
            <el-radio label="-1">全文</el-radio>
            <el-radio label="1">标题</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="搜索模式" class="serach-item">
          <el-radio-group v-model="formData.searchType">
            <el-radio label="1">精准搜索</el-radio>
            <el-radio label="2">智能搜索</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="搜索时间" class="serach-item">
          <el-radio-group v-model="formData.date">
            <el-radio label="0">全部</el-radio>
            <el-radio label="1">当天</el-radio>
            <el-radio label="2">最近一周</el-radio>
            <el-radio label="3">最近一个月</el-radio>
            <el-radio label="4">三个月内</el-radio>
            <el-radio label="5">半年内</el-radio>
            <el-radio label="6">一年内</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="搜索类型" class="serach-item">
          <el-checkbox-group v-model="formData.channelId">
            <el-checkbox
              v-for="item in aticles"
              :key="item.channelId"
              :label="item.channelId"
              >{{ item.channelName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="搜索地区" class="serach-item">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0"></div>

          <el-checkbox-group v-model="formData.regionId" @change="handleCheckedRegionChange">
            <el-row v-for="region in regions" :key="region.id" >
                <!-- <el-checkbox-group v-model="formData.regionId" @change="handleCheckedCitiesChange"> -->
              <el-row type="flex" justify="start">
                <el-col :span="2">
                  <el-checkbox class="region-first" :label="region.id">{{ region.name }}</el-checkbox>
                  <span class="region-line h4">|</span>
                </el-col>
                <el-col :span="2" v-for="item in region.regionAreaList" :key="region.id + '-' + item.areaId">
                  <el-checkbox :label="item.areaId">{{ item.areaName }}</el-checkbox>
                  <i @click="handleSelectArea(region.id, item)" class="h4 el-collapse-item__arrow el-icon-arrow-right" :class="{'is-active': isAreaActive == item.areaId}"></i>
                </el-col>
              </el-row>
                <!-- </el-checkbox-group> -->

              <el-row type="flex" justify="center" class="el-collapse-item__wrap h4" v-show="selectRegion == region.id">
                <el-checkbox-group class="fill-width" v-model="formData.cityId" @change="handleCheckedCitiesChange">
                  <el-col :span="2" v-for="city in citys" :key="city.id">
                    <el-checkbox :label="city.id">{{city.name}}</el-checkbox>
                  </el-col>
                </el-checkbox-group>
              </el-row>
            </el-row>
            
          </el-checkbox-group>
          <!-- <el-row v-for="region in regions" :key="region.id">
            <el-form-item>
              <el-row type="flex" justify="start">
                <el-col :span="2">
                   <el-checkbox v-model="formData.regionId" class="region-first" :key="region.id">{{ region.name }}</el-checkbox>
                  <span class="region-line">|</span>
                </el-col>
                <el-col
                  :span="2"
                  v-for="item in region.regionAreaList"
                  :key="region.id + '-' + item.areaId"
                >
                  <el-checkbox
                    :key="region.id + '-' + item.areaId"
                    :label="item.areaId"
                    >{{ item.areaName }}
                  </el-checkbox>
                  <i @click="handleSelectArea(region.id, item)" class="el-collapse-item__arrow el-icon-arrow-right" :class="{'is-active': isAreaActive == item.areaId}"></i>
                </el-col>
              </el-row>
                <el-row type="flex" justify="center" class="el-collapse-item__wrap" v-show="selectRegion == region.id">
                  <el-col :span="2">
                    <div>区域</div>
                  </el-col>
                  <el-col :span="2">
                    <div>区域</div>
                  </el-col>
                  <el-col :span="2" >
                    <div>区域</div>
                  </el-col>
                </el-row>
            </el-form-item>
          </el-row> -->
        </el-form-item>
        <el-form-item label-width="0">
          <el-button @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script scoped>
// @ is an alias to /src
// import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
import HomeHeader from "@/components/HomeHeader.vue";

import { getArea} from "@/api/api.js";
import searchHeader from "@/components/searchHeader.vue";
import searchMethods from './mixin/search'
export default {
  name: "Search",
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      isActive: false,
      selectRegion: '',
      selectArea: '',
      proviece: [
        { id: 1, name: "北京", pid: 0, level: 1, tableName: "data_beijing" },
        { id: 19, name: "上海", pid: 0, level: 1, tableName: "data_shanghai" },
        { id: 39, name: "天津", pid: 0, level: 1, tableName: "data_tianjin" },
        { id: 60, name: "重庆", pid: 0, level: 1, tableName: "data_chongqing" },
        { id: 102, name: "河北", pid: 0, level: 1, tableName: "data_hebei" },
        {
          id: 297,
          name: "山西",
          pid: 0,
          level: 1,
          tableName: "data_shanxi_ty",
        },
        { id: 438, name: "河南", pid: 0, level: 1, tableName: "data_hainan" },
        { id: 638, name: "辽宁", pid: 0, level: 1, tableName: "data_liaoning" },
        { id: 771, name: "吉林", pid: 0, level: 1, tableName: "data_jilin" },
        {
          id: 852,
          name: "黑龙江",
          pid: 0,
          level: 1,
          tableName: "data_heilongjiang",
        },
        {
          id: 1010,
          name: "内蒙古",
          pid: 0,
          level: 1,
          tableName: "data_neimenggu",
        },
        { id: 1136, name: "江苏", pid: 0, level: 1, tableName: "data_jiangsu" },
        {
          id: 1273,
          name: "山东",
          pid: 0,
          level: 1,
          tableName: "data_shandong",
        },
        { id: 1452, name: "安徽", pid: 0, level: 1, tableName: "data_anhui" },
        {
          id: 1592,
          name: "浙江",
          pid: 0,
          level: 1,
          tableName: "data_zhejiang",
        },
        { id: 1706, name: "湖北", pid: 0, level: 1, tableName: "data_hubei" },
        { id: 1846, name: "福建", pid: 0, level: 1, tableName: "data_fujian" },
        {
          id: 1949,
          name: "广东",
          pid: 0,
          level: 1,
          tableName: "data_guangdong",
        },
        { id: 2118, name: "湖南", pid: 0, level: 1, tableName: "data_hunan" },
        { id: 2268, name: "江西", pid: 0, level: 1, tableName: "data_jiangxi" },
        { id: 2390, name: "广西", pid: 0, level: 1, tableName: "data_guangxi" },
        { id: 2531, name: "海南", pid: 0, level: 1, tableName: "data_hainan" },
        { id: 2593, name: "四川", pid: 0, level: 1, tableName: "data_sichuan" },
        { id: 2821, name: "云南", pid: 0, level: 1, tableName: "data_yunnan" },
        { id: 2982, name: "贵州", pid: 0, level: 1, tableName: "data_guizhou" },
        {
          id: 3089,
          name: "陕西",
          pid: 0,
          level: 1,
          tableName: "data_shanxi_xa",
        },
        { id: 3217, name: "西藏", pid: 0, level: 1, tableName: "data_xizang" },
        { id: 3308, name: "青海", pid: 0, level: 1, tableName: "data_qinghai" },
        { id: 3367, name: "甘肃", pid: 0, level: 1, tableName: "data_ganxu" },
        {
          id: 3483,
          name: "新疆",
          pid: 0,
          level: 1,
          tableName: "data_xinjiang",
        },
        { id: 3622, name: "宁夏", pid: 0, level: 1, tableName: "data_ningxia" },
        { id: 3654, name: "跨省", pid: 0, level: 1, tableName: "data_china" },
      ],
      aticles: [
        {
          channelId: '',
          channelName: "全部",
        },
      ],
      regions: [],
      citys: [],
      formData: {
        channelId: [],
        provinceId: [],
        searchType: '1',
        date: '0',
        regionId: [],
        cityId: [],
        isAll: "0",
        year: "",
        month: "",
        day: "",
        isTitle: "-1",
        q: "",
        pageNo: 1,
        pageSize: 20
      },
    };
  },
  mixins: [searchMethods],
  components: {
    HomeHeader,
    searchHeader
  },
  computed: {
    isAreaActive: {
      get() {
        return this.selectArea
      },
      set(val) {
        this.selectArea = val
      }
    },
    regionId() {
      return this.regions.map(({id}) => id)
    }
  },
  mounted() {
  },
  methods: {
    async handleSelectArea(regionId, area) {
      let {list} = await getArea({ level: 2, pid:  area.areaId})
      console.log(list)
      this.citys = list
      if(this.selectRegion == regionId && this.selectArea == area.areaId) {
        this.selectRegion = ''
        this.selectArea = ''
      } else {
        this.selectRegion = regionId
        this.selectArea = area.areaId
      }
      
    },
    handleNodeClick() {},
  },
};
</script>
<style scoped lang="scss">
$base-color: #2f81b6;
.top {
  height: 16px;
  background: #cfcfcf;
  font-size: 14px;
}
.page-position {
  background: #0164a4;
  color: #fff;
  font-weight: 16px;
  height: 40px;
  line-height: 40px;
}
.bg-grey {
  background: #eeeeee;
}
.input-content {
  width: 569px;
  border: 1px solid $base-color;
  // height: 40px;
  // line-height: 40px;
  box-sizing: border-box;
  .el-button {
    background: $base-color;
    color: #fff;
    width: 116px;
  }
}
.serach-item {
  padding: 14px 0px;
  margin: 0 !important;
  &:nth-child(1) {
    padding: 30px 0px;
  }
  &:nth-child(odd) {
    // background: #EEEEEE;
    @extend .bg-grey;
  }
}

.region-first {
  margin: 0;
}
.region-line {
  margin: 0px 17px;
  color: $base-color;
  font-weight: 600;
  font-size: 14px;
}
.el-button {
  width: 124px;
  height: 36px;
  background: $base-color;
  color: #fff;
}
.el-collapse-item__wrap{
  padding: 20px;
}
</style>
